<template>
	<view class="box">
		<view class="topbox">
			<image src="../../static/logo.png" mode=""></image>
			<view class="name">
				小可爱就是赢得快
			</view>
		</view>
		<view class="contant">
			不用在为早餐吃什么而苦苦争扎啦，快捷简便又营养的网红早餐，只用花费
			几分钟就能制作好,高逼格西式早餐，先把面包烤好搭配上果酱水果片或是煎
			个太阳蛋就能搞定。
		</view>
		<view class="bigimg">
			<image src="../../static/ad.png" mode=""></image>
		</view>
		<view class="hr"></view>
		<view class="remark">
			<image src="../../static/logo.png" mode=""></image>
			<view class="leftbox">
				<view class="name">
					小可爱就是赢得快
				</view>
				<view class="time">
					2021-01-01
				</view>
				<view class="br">
					是暗示法谁开车是哈哈是你上
					次审计局新科技爱是多高放顶上辅导费
				</view>
			</view>
		</view>
		<view class="" style="height: 110rpx;">
			
		</view>
		<view class="btnbox">
			<view class="time">
				2021-01-01
			</view>
			<view class="rightbox">
				<image src="../../static/shar.png" mode="" style="width: 25rpx; height: 26rpx;"></image>
				<view class="">
					<image src="../../static/方气泡聊.png" mode="" style="width: 28rpx; height: 24rpx;"></image>
					<text>52</text>
				</view>
				<view class="">
					<image src="../../static/浏览量.png" mode="" style="width: 32rpx; height: 18rpx;"></image>
					<text>52</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.box {
		background-color: #fff;
		padding: 25rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: scroll;

		.topbox {
			display: flex;
			align-items: center;

			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 64rpx;
			}

			.name {
				font-family: MicrosoftYaHei;
				font-size: 26rpx;
				color: #333333;
				margin-left: 25rpx;
			}
		}

		.contant {
			font-family: SourceHanSansCN-Regular;
			font-size: 26rpx;
			line-height: 48rpx;
			margin-top: 40rpx;
			color: #666666;
			width: 699rpx;
		}

		.bigimg {
			width: 700rpx;
			height: 340rpx;
			border-radius: 10rpx;
			margin-top: 30rpx;

			image {
				width: 700rpx;
				height: 340rpx;
			}
		}

		.hr {
			width: 750rpx;
			height: 16rpx;
			background-color: #f7f7f7;
			margin-top: 20rpx;
		}

		.remark {
			margin-top: 49rpx;
			display: flex;

			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 64rpx;
			}

			.leftbox {
				margin-left: 30rpx;

				.name {
					font-family: MicrosoftYaHei;
					font-size: 26rpx;
					color: #222222;
				}

				.time {
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					color: #999999;
					margin-top: 15rpx;
				}

				.br {
					width: 606rpx;
					font-family: MicrosoftYaHei;
					color: #444444;
					margin-top: 15rpx;
				}
			}
		}

		.btnbox {
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #F7F7F7;
			height: 110rpx;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.time {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #999999;
			}

			.rightbox {
				display: flex;
				align-items: center;
				justify-content: space-around;

				image {
					margin-left: 30rpx;
					margin-right: 10rpx;
				}

				text {
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
</style>
